<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>button 样式总结</title>
</head>

<body>
  <div id="app">

    <div class="button-box">
      <p>autofocus 属性规定当页面加载时按钮应当自动地获得焦点。</p>
      <button type="button" autofocus> 点我 </button>
    </div>

    <div class="button-box">
      <p>被禁用的按钮是无法使用和无法点击的。</p>
      <p>可以对 disabled 属性进行设置，使用户在满足某些条件时（比如选中复选框，等等）才能点击按钮。</p>
      <p>然后，可使用 JavaScript 来删除 disabled 属性，使该按钮变为可用的状态</p>
      <button type="button" disabled> 点我 </button>
    </div>

    <div class="button-box">
      <button type="button" autofocus> 点我 </button>
    </div>

    <div class="button-box">
      <p>name 属性为按钮规定名称。</p>
      <button type="button" name="mybutton"> 点我 </button>
    </div>

    <div class="button-box">
      <p>
        button
        reset
        submit
      </p>
      <button type="reset"> 点我 </button>
    </div>

    <div class="button-box">
      <p>
        text
      </p>
      <button type="text"> 点我 </button>
    </div>


  </div>
</body>

</html>